<template>
  <div class="home">
    <div class="homeview">
      <div class="lunbo">
        <div class="lunboview">
          <div class="lunbo2">
            <swiper ref="mySwiper" :options="swiperOptions">
              <swiper-slide v-for="(item, index) in lunsrc" :key="index">
                <div><img :src="item.imageUrl"   /></div>
              </swiper-slide>
            </swiper>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import 'swiper/css/swiper.css'
var vm = null
export default {
  name: 'Lunbo',
  props: {
    lunsrc: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      swiperOptions: {
        autoplay: true,
        speed: 500, // 自动滑动开始到结束的时间（单位ms）
        loop: true,
        loopedSlides: 2,
        slidesPerView: 3,
        spaceBetween: 0,
        centeredSlides: true,
        freeMode: false,
        on: {
          click: function(e) {
            vm.handleClickSlide(this.realIndex)
          }
        }
      }
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    }
  },
  created() {
    vm=this
  },
  mounted() {},
  methods: {
    handleClickSlide(e) {
      if (this.lunsrc[e].link && this.lunsrc[e].link.indexOf('http') === 0) {
        location.href = this.lunsrc[e].link
      } else if (this.lunsrc[e].link) {
        this.$router.push({ name: this.lunsrc[e].link })
      }
    },
  }
}
</script>

<style lang="less" scoped>
.lunboview {
  width: 100%;
  height: 170px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.lunbo2 {
  width: 900px;
  height: 170px;
}

.swiper-container {
  width: 100%;
  height: 170px;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  width: 300px;
  height: 170px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  transition: 300ms;
  transform: scale(0.9);
}

.swiper-slide-active,
.swiper-slide-duplicate-active {
  transform: scale(1);
}

.swiper-slide div {
  width: 100%;
  height: 100%;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  border-radius: 15px;
}
</style>
